<template>
	<div>
		<el-dialog
			:visible="visible"
			@update:visible="(val) => $emit('update:visible', val)"
			width="600px"
		>
			<div slot="title" style="font-size: 20px; text-align: center">
				<span>电子签章身份核验</span>&nbsp;
			</div>
			<div>
				下载投保书【及经纪人委托授权】: &nbsp;
				<a href="" style="color: #5f88ff">点击下载</a>
			</div>

			<div class="form-item">
				<div class="form-item__lb">上传盖章投保书</div>
				<upload
					v-model="insureFiles"
					:data="{ batchId: insureFileBatchId }"
				></upload>
			</div>

			<div class="form-item">
				<div class="form-item__lb">上传经纪人委托授权书</div>
				<div class="form-item__con">
					<upload
						v-model="weituoFiles"
						:data="{ batchId: weituoFileBatchId }"
					></upload>
				</div>
			</div>

			<div style="margin-block: 15px">
				上传后，请将对应资料寄送至：{{ dataDelivery || '--' }}
			</div>

			<div style="text-align: center" slot="footer">
				<el-button type="primary" @click="submit" size="medium">确认</el-button>
			</div>
		</el-dialog>

		<el-image
			style="width: 0px; height: 0px"
			:preview-src-list="previewImageList"
			ref="preview"
		/>
	</div>
</template>

<script>
import { uploadFile, printSeal } from '@/api'
import Upload from '@/components/form/fields/upload.vue'
export default {
	props: {
		visible: Boolean,
		businessId: String,
		productId: String,
		dataDelivery: String
	},
	data() {
		return {
			previewImageList: [],
			insureFiles: [],
			weituoFiles: []
		}
	},
	computed: {
		insureFileBatchId() {
			return this.insureFiles[0]?.batchId || ''
		},
		weituoFileBatchId() {
			return this.weituoFiles[0]?.batchId || ''
		}
	},
	mounted() {},
	methods: {
		submit() {
			if (!this.insureFileBatchId) {
				this.$message.error('请上传盖章投保书')
				return
			}
			if (!this.weituoFileBatchId) {
				this.$message.error('请上传经纪人委托授权书')
				return
			}
			printSeal(
				{
					insuranceSeal: this.insureFileBatchId,
					brokerAuthorization: this.weituoFileBatchId
				},
				{ businessId: this.businessId }
			).then(() => {
				this.$message.success('提交成功')
				this.$router.push({
					name: 'Payment',
					query: {
						businessId: this.businessId,
						productId: this.productId
					}
				})
			})
		}
	},
	components: { Upload }
}
</script>

<style lang="scss" scoped="scoped">
.form-item {
	margin-block: 15px;
	display: grid;
	grid-template-columns: 150px 1fr;
	&__lb {
		margin-top: 5px;
	}
}
</style>
